<template>
  <view class="orders-page">
    <!-- 订单分类标签 -->
    <view class="tabs-section">
      <view class="tabs-container">
        <view 
          v-for="(tab, index) in orderTabs" 
          :key="index"
          class="tab-item"
          :class="{ 'tab-active': activeTab === index }"
          @tap="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="orders-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      @refresherrefresh="onRefresh"
      :refresher-triggered="refreshing"
    >
      <view class="orders-list" v-if="ordersList.length > 0">
        <view 
          v-for="(order, index) in ordersList" 
          :key="index"
          class="order-card fade-in"
          @tap="goToOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-type">{{ order.type }}</text>
            <text class="order-status" :class="getStatusClass(order.status)">
              {{ order.status }}
            </text>
          </view>
          
          <view class="order-content">
            <view class="order-info">
              <text class="order-title">{{ order.title }}</text>
              <text class="order-desc">{{ order.description }}</text>
              <text class="order-time">{{ order.createTime }}</text>
            </view>
            
            <view class="order-image" v-if="order.image">
              <image :src="order.image" mode="aspectFill" class="order-img"></image>
            </view>
          </view>
          
          <view class="order-footer" v-if="order.amount">
            <text class="order-amount">{{ order.amount }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <view class="empty-icon">📦</view>
        <text class="empty-title">暂无订单</text>
        <text class="empty-subtitle">快去下单回收吧</text>
      </view>

      <!-- 加载状态 -->
      <view class="load-more" v-if="loading">
        <view class="loading"></view>
        <text class="load-text">加载中...</text>
      </view>
      
      <view class="no-more" v-if="noMore && ordersList.length > 0">
        <text class="no-more-text">没有更多订单了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const activeTab = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const noMore = ref(false)

const orderTabs = ref([
  { name: '全部', type: 'all' },
  { name: '回收订单', type: 'recycle' },
  { name: '商城订单', type: 'mall' },
  { name: '回收袋订单', type: 'bag' }
])

const ordersList = ref([
  {
    id: 1,
    type: '回收订单',
    title: '废纸回收',
    description: '回收地址：北京市朝阳区三里屯',
    status: '待处理',
    amount: '预估收益 ¥15.00',
    createTime: '2024-01-15 14:30',
    image: '/static/images/recycle-order.jpg'
  },
  {
    id: 2,
    type: '商城订单',
    title: '30元霸王茶姬代金券',
    description: '使用1000积分兑换',
    status: '已完成',
    amount: '1000积分',
    createTime: '2024-01-14 10:20',
    image: '/static/images/chagee-voucher.jpg'
  }
])

onLoad((options) => {
  // 根据传入的类型设置默认选中的标签
  if (options.type) {
    const tabIndex = orderTabs.value.findIndex(tab => tab.type === options.type)
    if (tabIndex > -1) {
      activeTab.value = tabIndex
    }
  }
})

const switchTab = (index) => {
  activeTab.value = index
  filterOrdersByTab(index)
}

const filterOrdersByTab = (tabIndex) => {
  // 根据标签筛选订单
  const tabType = orderTabs.value[tabIndex].type
  
  if (tabType === 'all') {
    // 显示全部订单
    return
  }
  
  // 这里可以根据不同类型筛选订单
  console.log('筛选订单类型:', tabType)
}

const getStatusClass = (status) => {
  switch (status) {
    case '待处理':
      return 'status-pending'
    case '进行中':
      return 'status-processing'
    case '已完成':
      return 'status-completed'
    case '已取消':
      return 'status-cancelled'
    default:
      return ''
  }
}

const onRefresh = () => {
  refreshing.value = true
  
  setTimeout(() => {
    refreshing.value = false
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  }, 1500)
}

const loadMore = () => {
  if (loading.value || noMore.value) return
  
  loading.value = true
  
  setTimeout(() => {
    loading.value = false
    noMore.value = true
  }, 1500)
}

const goToOrderDetail = (order) => {
  uni.showToast({
    title: `查看订单：${order.title}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.orders-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.tabs-section {
  background: white;
  padding: 0 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.tabs-container {
  display: flex;
  align-items: center;
  height: 88rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  position: relative;
  transition: all 0.3s ease;
}

.tab-active {
  color: #8BC34A;
  font-weight: 600;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: #8BC34A;
  border-radius: 3rpx;
}

.orders-scroll {
  height: calc(100vh - 88rpx);
}

.orders-list {
  padding: 24rpx 32rpx;
}

.order-card {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.order-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.order-type {
  font-size: 24rpx;
  color: #8BC34A;
  font-weight: 500;
}

.order-status {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.status-pending {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.status-processing {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}

.status-completed {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.status-cancelled {
  background: rgba(158, 158, 158, 0.1);
  color: #9E9E9E;
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.order-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.order-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.order-time {
  font-size: 22rpx;
  color: #999;
}

.order-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-left: 24rpx;
}

.order-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-footer {
  text-align: right;
  border-top: 2rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.order-amount {
  font-size: 28rpx;
  color: #8BC34A;
  font-weight: 600;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.5;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.empty-subtitle {
  font-size: 26rpx;
  color: #999;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.load-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
}

.no-more {
  text-align: center;
  padding: 40rpx;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>